<template>
    <div class="container index">
        <SwiperSlide :sliders="sliders" :options="swiperOption"></SwiperSlide>
        <IndexNav></IndexNav>
        <TopicList :topic="Topic"></TopicList>
    </div>
</template>
<script>
import IndexNav from './index-nav.vue'
import SwiperSlide from './SwiperSlide.vue';
import TopicList from './TopicList.vue';
import Axios from 'axios';

export default {
    data() {
        return {
            swiperOption: {
                autoplay: 3000,
                speed: 400,
                loop: true,
                preloadImages: false,
                lazyLoading: true,
                pagination: '.swiper-pagination'
            },
            sliders: [{
                linkUrl: "http://blog.wapui.com",
                imgUrl: 'http://p2.qsc.dreamore.cn/Uploads/Project/Thumb/20170228/58b4f9fcc4837.jpg'
            }, {
                linkUrl: "http://blog.wapui.com",
                imgUrl: 'http://p2.qsc.dreamore.cn/Uploads/Project/Thumb/20170228/58b4f9fcc59fa.jpg'
            }, {
                linkUrl: "http://blog.wapui.com",
                imgUrl: 'http://p2.qsc.dreamore.cn/Uploads/Project/Thumb/20170228/58b4f9fcc6a34.jpg'
            }, {
                linkUrl: "http://blog.wapui.com",
                imgUrl: 'http://p2.qsc.dreamore.cn/Uploads/Project/Thumb/20170228/58b4f9fcc8b08.jpg'
            }],
            Topic: []
        }
    },
    beforeCreate() {
        console.log("beforeCreate-index")

    },
    created() {
        console.log("created-index")
    },
    beforeMount() {
        console.log("beforeMount-index")
        let self = this;
        Axios.get('https://cnodejs.org/api/v1/topics', {
                params: {
                    page: 0,
                    tab: '',
                    limit: 20,
                    mdrender: false
                }
            })
            .then(function(response) {
                console.log(response.data.data);
                self.Topic = response.data.data
            })
            .catch(function(error) {
                console.log(error);
            });

    },
    beforeUpdate() {
        console.log("beforeUpdate-index")
    },
    activated() {
        console.log('activated-index')
    },
    mounted() {
        console.log('mounted-index')
    },
    updated() {
        console.log("uodated-index")
    },
    beforeDestroy() {
        console.log("beforeDestroy-index")
    },
    destroyed() {
        console.log("destroyed-index")
    },
    deactivated() {
        console.log('deactivated0-index')
    },
    components: {
        IndexNav,
        TopicList,
        SwiperSlide
    }

}
</script>
